<template>
  <div>
    <div class="zy-select" @click="chooseSelect" :style="{width:newWidth}" id="zySelect" ref="zySelect">
      <div class="box">
        <input class="zy-input">
        <b :class="zySelect"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
      </div>
      <div>
      </div>
    </div>
    <select-temp id="zySelectTemp" ref="zySelectTemp"></select-temp>
  </div>
</template>

<script>
import selectTemp from "@/components/select/selecttemp";

export default {
  name: "zySelect",
  components: {selectTemp},
  props: {
    newWidth: {
      type: String,
      default: '100px'
    }
  },
  data() {
    return {
      zySelect: 'bottom',
    }
  },
  mounted() {
    if (this.zySelect == 'bottom-up') {
      document.addEventListener('click', (e) => {
        // console.log(this.$refs.zySelect)
        if (!this.$refs.zySelect.contains(e.target)) {
          this.zySelect = 'bottom'
        }

        const item = document.getElementById('zySelectTemp')
        if (!item.contains(e.target)) {
          this.zySelect = 'bottom'
        }
      })
    }
  },
  computed: {
    // newStyle() {
    //   return {
    //     '--new-width':this.newWidth
    //   }
    // }
  },
  methods: {
    chooseSelect() {
      this.zySelect = 'bottom-up'

    }
  }

}
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.zy-select {
  /*width: var(--new-width);*/
}

.box {
  height: 30px;
  border: 1px solid #39cd81;
  border-radius: 5px;
  position: relative;
}

.zy-input {
  position: absolute;
  top: 0;
  left: 2%;
  width: 89%;
  height: 90%;
  border: 0;
  outline: none;
}

.bottom {
  position: absolute;
  right: 20px;
  top: 39%;
  transition: transform 0.5s;
  transform: rotate(360deg);
  transform-origin: 6px 3px;
}

.bottom-up {
  position: absolute;
  right: 20px;
  top: 39%;
  transition: transform 0.5s;
  transform: rotate(180deg);
  transform-origin: 6px 3px;
}

.bottom-arrow1, .bottom-arrow2 {
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-bottom: 6px transparent dashed;
  border-left: 6px transparent dashed;
  border-right: 6px transparent dashed;
  border-top: 6px white solid;
  overflow: hidden;
}

.bottom-arrow1 {
  top: 2px; /*重要*/
  border-top: 6px #3c66d2 solid;
}

.bottom-arrow2 {
  border-top: 6px white solid;
}


</style>
